<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" height="0" style="min-height: 0;">
			<view class="voucher_list">
				<view class="voucher_list_item" v-for="(item,index) in list" :key="index">
					<view class="voucher_list_item_top">
						<view class="voucher_list_item_top_left voucher_list_item_top_secondly">
							<view class="voucher_list_item_top_left_money">
								<text class="voucher_list_item_top_left_money_sign">￥</text>
								<text class="voucher_list_item_top_left_money_amount">{{Number(item.money)}}</text>
							</view>
							<text class="voucher_list_item_top_left_fullmoney">满{{item.limit}}元</text>
						</view>
						<view class="voucher_list_item_top_right">
							<view class="voucher_list_item_top_right_information">
								<view class="voucher_list_item_top_right_information_effect">
									<text class="voucher_list_item_top_right_information_effect_left">{{item.title}}</text>
									<!-- <text v-if="item.isSuperPosition!=0" class="voucher_list_item_top_right_information_effect_right">{{item.isSuperPosition==1?'可叠加':'不可叠加'}}</text> -->
								</view>
								<text class="voucher_list_item_top_right_information_time">有效期至 {{item.expire_format}}</text>
								<!-- <text class="voucher_list_item_top_right_information_amount">现有100张使用</text> -->
							</view>
							<view class="voucher_list_item_top_right_status" @click="buyVoucher(item)">
								<text class="voucher_list_item_top_right_status_text">￥{{Number(item.price)}}购买</text>
							</view>
						</view>
					</view>
					<view class="voucher_list_item_bottom">
						<view class="voucher_list_item_bottom_condition">
							<text class="voucher_list_item_bottom_condition_text" :class="[item.isImage&&'voucher_list_item_bottom_condition_extext']">
								{{item.rule}}
							</text>
						</view>
						<image class="voucher_list_item_bottom_image" :class="[item.isImage&&'voucher_list_item_bottom_eximage']" @click="switchover(item)" src="/static/my/pulldown.png" mode=""></image>
					</view>
				</view>
			</view>			
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 下拉刷新的组件 参数 可以 改变的
				downOption: {
					use: false,
					auto: true //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					auto: true, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '暂无抵扣券', // 提示
						icon: '/static/my/discounts_empty.png'
					},
					textNoMore: '—— 没有更多抵扣券了 ——'
				},
				list:[
				]
			}
		},
		computed:{
			changList(){
				return function(item){
					if(item.isImage){
						return item.rulesList
					}else{
						let c=item.rulesList.filter((itemv,indexv)=>{
							return indexv==0
						})
						return c
					}
				}
			}
		},
		methods: {
			// 购买
			buyVoucher(item){
				this.api.couponGetCoupon2({
					id:item.id
				})
				.then(resa=>{
					this.api.newPay({
						out_trade_no: resa.out_trade_no
					})
					.then(resb=>{
						this.api.payment({
							out_trade_no: resb.pay_data.out_trade_no
						})
						.then(resc => {
							this.json = resc.data.json
							let param = JSON.parse(resc.data.json)
							uni.requestPayment({
								timeStamp: param.timeStamp, //记住，这边的timeStamp一定要是字符串类型的，不然会报错
								nonceStr: param.nonceStr,
								package: param.package,
								signType: 'MD5',
								paySign: param.paySign,
								appId: param.appId,
								success: function(event) {
									wx.showToast({
										title: '购买成功',
										icon: 'success',
										duration: 2000
									});
								},
								
								fail: function(error) {},
								complete: function() {}
							});
						})
					})
				})
			},
			// 切换
			switchover(item){
				item.isImage=!item.isImage
			},
			//下拉刷新 不需要开启
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			// 上拉加载
			upCallback(page) {
				this.api.couponList({
					type:2
				})
				.then(res=>{
					this.list=res.data_list.map(item=>{
						item.isImage=false
						return item
					})
					this.mescroll.endByPage(res.data_list.length,0)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.voucher_list{
		margin-top: 46rpx;
		padding:0 30rpx;
		&_item{
			padding: 0 20rpx;
			margin-top: 30rpx;
			box-shadow: 0px 0px 12px 0px rgba(91, 74, 40, 0.1);
			border-radius: 8rpx;
			&_top{
				padding: 24rpx 0;
				display: flex;
				&_left{
					width: 188rpx;
					height: 152rpx;
					background: linear-gradient(90deg, #0DA057 0%, #077840 100%);
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					&_money{
						display: flex;
						align-items: center;
						&_sign{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 34rpx;
							margin-top: 30rpx;
						}
						&_amount{
							font-size: 60rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 84rpx;
						}
					}
					&_fullmoney{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
				&_secondly{
					background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
				}
				&_thirdly{
					background: linear-gradient(90deg, #5BB6FB 0%, #2F80F6 100%);
				}
				&_right{
					display: flex;
					// justify-content: space-between;
					// align-items: center;
					flex: 1;
					height: 152rpx;
					&_information{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						&_effect{
							display: flex;
							&_left{
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 40rpx;
								margin-right: 8rpx;
							}
							&_right{
								width: 98rpx;
								height: 32rpx;
								background: #FFFFFF;
								border-radius: 4rpx;
								border: 2rpx solid #FF5100;
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FF5100;
								line-height: 28rpx;
								text-align: center;
								box-sizing: border-box;
							}
						}
						&_time{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}
						&_amount{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}
					}
					&_status{
						display: flex;
						align-items: center;
						&_text{
							border-radius: 26rpx;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							padding: 8rpx 26rpx;
							background-color: #FF5100;
						}
						&_secondly{
							border: 2rpx solid #FF5100;
							color: #FF5100;
						}
						&_thirly{
							border: 2rpx solid #2F80F6;
							color: #2F80F6;
						}
					}
				}
			}
			&_bottom{
				padding: 24rpx 0;
				border-top: 2rpx dashed #E5E5E5;
				display: flex;
				justify-content: space-between;
				&_condition{
					display: flex;
					flex-direction: column;
					width: calc( 100% - 50rpx );
					&_text{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						margin-bottom: 20rpx;
						overflow: hidden; 
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					&_extext{
						overflow:inherit;
						text-overflow: inherit;
						white-space: inherit;
					}
				}
				&_image{
					width: 24rpx;
					height: 14rpx;
					vertical-align: top;
					margin-top: 10rpx;
					margin-left: 24rpx;
					transform: rotate(0);
					// transition: 0.3s ease-in-out;
				}
				&_eximage{
					transform: rotate(-180deg);
				}
			}
		}
	}
</style>
